<template>
  <div>
    <!-- 内容 -->
    <div>
      <!-- search -->
      <div class="query-form" v-if="'query' == props.mode">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="publisher" placeholder="发行商名称模糊查询"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="danger" @click="reseet">重置</el-button>
            </el-button-group>
            <el-button type="success" @click="showadd" style="margin-left: 1rem">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- table -->
      <div>
        <el-table :data="list">
          <el-table-column label="发行商名称" prop="publisher"></el-table-column>

          <el-table-column
            v-if="'query' == props.mode"
            label="发行商简介"
            prop="intro"
            width="1000"
          ></el-table-column>

          <el-table-column label="发行商创建时间" v-if="'query' == props.mode" width="200">
            <template #default="scope">
              {{ tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                @click="showmodify(scope.row)"
                v-if="'query' == props.mode"
                type="warning"
                size="small"
                >修改</el-button
              >
              <el-button
                @click="del(scope.row)"
                v-if="'query' == props.mode"
                type="danger"
                size="small"
                >删除</el-button
              >
              <el-button
                @click="selectType(scope.row)"
                v-if="'selector' == props.mode"
                size="small"
                type="success"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- page -->
      <div class="page">
        <el-pagination
          v-model:current-page="page.pageNumber"
          v-model:page-size="page.pageSize"
          :total="page.total"
          :page-sizes="[2, 5, 10, 15]"
          @size-change="getList"
          layout="prev,pager,next,total,sizes"
          @current-change="getList"
        >
        </el-pagination>
      </div>

      <!-- dialog -->
      <div>
        <!-- add -->
        <div>
          <el-dialog title="添加游戏发行商" v-model="avisible">
            <div>
              <el-form>
                <el-form-item>
                  <el-input v-model="addInfo.publisher" placeholder="游戏发行商名称"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-input
                    v-model="addInfo.intro"
                    placeholder="游戏发行商简介"
                    type="textarea"
                    rows="5"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择日期"
                    v-model="addInfo.created"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  >
                  </el-date-picker
                ></el-form-item>
              </el-form>
            </div>

            <template #footer>
              <el-button @click="add" type="success">添加</el-button>
              <el-button @click="avisible = false" type="danger">取消</el-button>
            </template>
          </el-dialog>
        </div>

        <!-- modify -->
        <div>
          <el-dialog title="修改游戏发行商信息" v-model="mvisible">
            <div>
              <el-form>
                <el-form-item>
                  <el-input v-model="modifyInfo.publisher" placeholder="游戏发行商名称"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-input
                    v-model="modifyInfo.intro"
                    placeholder="游戏发行商简介"
                    type="textarea"
                    rows="5"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择日期"
                    v-model="modifyInfo.created"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  >
                  </el-date-picker
                ></el-form-item>
              </el-form>
            </div>

            <template #footer>
              <el-button @click="modify" type="warning">修改</el-button>
              <el-button @click="mvisible = false" type="danger">取消</el-button>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

//#region 选择的部分
const props = defineProps(['mode'])
const emits = defineEmits(['type-selected'])

const selectType = (info) => {
  emits('type-selected', info)
}
//#endregion

//#region 数据获取的部分
const list = ref([])
const page = ref({
  pageSize: 10,
  pageNumber: 1,
})
const publisher = ref('')

const getList = () => {
  api.get(
    `/crud/gamepublisher/${page.value.pageSize}/${page.value.pageNumber}`,
    { publisher: publisher.value },
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询失败')
    },
  )
}
onMounted(() => {
  getList()
})

// search & reset
const search = () => {
  page.value.pageNumber = 1
  getList()
}
const reseet = () => {
  publisher.value = ''
  page.value.pageNumber = 1
  getList()
}

//#endregion

//#region 添加
const avisible = ref(false)
const showadd = () => {
  addInfo.value = {
    publisher: '',
    intro: '',
    created: '',
  }
  avisible.value = true
}
const addInfo = ref({
  publisher: '',
  intro: '',
  created: '',
})
const add = () => {
  api.post('/crud/gamepublisher', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      addInfo.value = {
        publisher: '',
        intro: '',
        created: '',
      }
      avisible.value = false
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}

//#endregion

//#region 修改
const mvisible = ref(false)
const showmodify = (info) => {
  modifyInfo.value = tools.mergeJson(info)
  modifyInfo.value.created = tools.formatDate(info.created)
  mvisible.value = true
}
const modifyInfo = ref({
  publisher: '',
  intro: '',
  created: '',
})
const modify = () => {
  api.put('/crud/gamepublisher', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      modifyInfo.value = {
        publisher: '',
        intro: '',
        created: '',
      }
      mvisible.value = false
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}

//#endregion

//#region 删除
const del = (info) => {
  ElMessageBox.alert(`确定要删除：${info.publisher}吗?`, '删除游戏发行商', { type: 'warning' })
    .then(() => {
      api.delete(`/crud/gamepublisher/${info.gpid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        search()
      })
    })
    .catch(() => {})
}

//#endregion
</script>

<style scoped>
.width {
  width: 200px;
}
</style>
